<!-- 产品详情页 -->
<template>
  <div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      ref="skuaaaa"
    />
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addcar"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsDetail } from "@/https/http";
export default {
  data() {
    return {
      show: false, // 是否显示购物车弹窗
      sku: {
        tree: [], // 规格类目数组
        hide_stock: false, // 是否隐藏剩余库存
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
      },
      goods: {}, //当前商品信息
      goodsId: "", //当前商品id
      quotaUsed: 0, //已经购买过的数量
    };
  },
  created() {
    // console.log(this.$route.query);
    getGoodsDetail({ id: this.$route.query.id }).then((res) => {
      console.log(res);
    });
  },
  methods: {
    addcar() {
      //显示加入购物车弹窗
      this.show = true;
    },
    onBuyClicked() {
      // 购买
    },
    onAddCartClicked() {
      // 商品加入购物车
      this.show = false;
      // 调用加入购物车接口
      console.log(this.$refs.skuaaaa.getSkuData());
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>